<template>
  <div class="common-layout">
    <div class="register parent" style="background-color: rgba(240, 248, 255, 0.6);">
      <el-form
        ref="registerFormRef"
        style="max-width: 600px"
        :model="registerForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
      <h1 class="p">镜&nbsp;莲&nbsp;华</h1>
        <div class="child">
          <el-form-item label="用户名" prop="name">
            <el-input v-model="registerForm.name" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="registerForm.password" type="password" />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="registerForm.confirmPassword" type="password" />
          </el-form-item>
          <el-form-item style="margin-left: 125px;">
            <el-button type="primary" @click="submitRegisterForm(registerFormRef)">注册</el-button>
            <el-button @click="toLogin">返回登陆</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';
import { ElForm } from 'element-plus';
import router from '@/router';


export default {
  components: {
    ElForm,
  },
  data() {
    return {
      formSize: 'default',
      registerForm: reactive({
        name: '',
        password: '',
        confirmPassword: '',
      }),
      rules: {
        name: [
          { required: true, message: '请输入新用户名', trigger: 'blur' ,validator:this.validateNewName},
          { min: 3, max: 10, message: '用户名长度需在3-10之间', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 18, message: '密码长度需在6-18之间', trigger: 'blur' },
        ],
        confirmPassword: [
          {
            required: true,
            message: '请确认密码',
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              if (value !== this.registerForm.password) {
                callback(new Error('两次输入的密码不一致'));
              } else {
                callback();
              }
            },
            trigger: 'blur',
          },
        ],
      },
      registerFormRef: null,
      registeredUsers:''
      
    };
  
  },
  mounted() {
    this.$nextTick(() => {
      this.registerFormRef = this.$refs.registerFormRef;
    });
    this.registeredUsers = JSON.parse(sessionStorage.getItem('registeredUsers')) || [];
  },
  methods: {
    validateNewName(rule, value, callback) {
        if (this.registeredUsers.some(user => user.name === value)) {
          callback(new Error('用户名已存在'));
        } else {
          callback();
        }
},
    submitRegisterForm() {
      if (!this.registerFormRef) return;

        this.registerFormRef.validate((valid) => {
          if (valid) {
            // 模拟将用户数据存入 sessionStorage
           
            this.registeredUsers.push({
              name: this.registerForm.name,
              password: this.registerForm.password,
            });
            sessionStorage.setItem('registeredUsers', JSON.stringify(this.registeredUsers));
            alert('注册成功！');
            this.resetRegisterForm();
            router.push('./login')
          } else {
            console.log('注册失败');
          }
        });
    },
    resetRegisterForm() {
      if (!this.registerFormRef) return;
      this.registerFormRef.resetFields();
    },
    toLogin(){
      router.push('./login')
    }
  },

};
</script>

<style scoped>
.register {
  width: 400px;
  height: 300px;
  margin: auto;
  text-align: center;
}

.common-layout {
  background: url(../../assets/img/register.jpg
  );
  height: 100%;
  width: 100%;
  background-size: cover;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
}

.parent {
  width: 420px;
  height: 350px;
  position: relative;
  margin-left: 49%;
  margin-top: 15%;
}

.child {
  width: 350px;
  height: 150px;
  position: absolute;
  top: 25%;
  margin-left: 18px;
  margin-top: 40px;
  text-align: center;
}
.p{
color:rgb(121.3, 187.1, 255,0.7);
font-family:华文行楷;
font-size: 50px;
}

</style>